<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    document.body.innerHTML = `
      <div id="foo">
        <p slot="first">我是第一个内容</p>
        <p slot="second">我是第二个内容</p>
      </div>
      <div id="bar">bar</div>
    `;
    const ofoo = document.querySelector('#foo');
    const obar = document.querySelector('#bar');

    ofoo.addEventListener('click', function() {
      console.log('我被事件冒泡了')
    }, false)

    const openShadowDom = ofoo.attachShadow({ mode: 'open' });
    const closeShadowDom = obar.attachShadow({ mode: 'closed' });
    console.log(openShadowDom);
    console.log(closeShadowDom)
    const color = "#f8a25c"
    // slot会把原来dom，ofoo中的内容添加进slot中
    // 可以通过name、slot属性生成命名插槽
    openShadowDom.innerHTML = `  
      <div id="attachShadow">
        <button onclick="console.log('你点击了影子')">请点击我一下</button>
        <slot name="first" onclick="console.log('你点击了影子')"></slot>   
        <slot name="second"></slot>   
      </div>
      
      <style>
        #attachShadow {
          color: ${color}
        }  
      </style>
    `
    console.log(document.getElementById('fooSpan')) // 在影子DOM中找不到
  </script>
</body>

</html>